<template>
    <div class="box">
        <div>商品1价格：<input type="text" v-model="goods1"></div>
        <div>商品2价格：<input type="text" v-model="goods2"></div>
        <div ref="sums">总价:<span>{{ total }}</span></div>
    </div>
</template>
<script setup lang="ts"> 
import { computed, reactive, ref, watch } from 'vue' 
const goods1 = ref(10)
const goods2 = ref(20)
// const sums = ref()
// 计算属性
let total = computed(()=>{
    return Number(goods1.value) + Number(goods2.value)
})
// 监听属性
watch((total),(newTotal)=>{
    if(newTotal>100){
        alert('超过100给你优惠价')
    }
})
</script>
<style scoped>
.box{
    width: 300px;
    height: 300px;
    background-color: rgb(165, 163, 163);
}
</style>